<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <button id="btn">点击</button>
    </div>
</body>
<script>
    // 断点 -> 调试工具(debugger  哪里不会点哪里!)
    // 让代码执行到指定位置停下来 -> 后续可以手动一步一步执行

    // 断点的使用流程
    // 1. 打断点 -> 哪里不会点哪里!
    // 2. 打开开发者工具 -> source(资源)  
    // 3. 触发断点(让代码重新执行)
    //    a. 代码在页面加载时执行(代码直接写在script中)  -> 刷新页面(重新加载)
    //    b. 代码在事件中执行   -> 触发事件
    //    c. 代码在函数中执行   -> 调用函数 (页面加载时调用 事件中调用)

    //   F8   1. 从当前断点直接执行至下一个断点所在位置 2. 后果后续没有断点 -> 直接执行至脚本 并结束
    //   F9   下一步
    //   F10
    //   F11

    // 4. 代码调试完毕 -> 清除或注释断点

    // 页面加载时执行
    debugger;
    var grade = Math.round(Math.random() * 100); // 0-100
    console.log(grade);

    debugger;
    if (grade >= 90) {
        document.write(grade + "分,优秀");
    } else if (grade >= 80) {
        document.write(grade + "分,良好");
    } else if (grade >= 70) {
        document.write(grade + "分,一般");
    } else if (grade >= 60) {
        document.write(grade + "分,及格");
    } else {
        document.write(grade + "分,不及格");
    }

    // 事件中执行
    var btn = document.getElementById("btn");

    // 点击事件 -> 页面加载时只是绑定了事件 (浏览器监听到用户点击动作之后 执行该函数)
    btn.onclick = function () {
        // 注意: 事件中不能使用document.write(), 事件触发时,文档也已经加载完毕 -> 会覆盖原本的内容
        debugger;
        var grade = Math.round(Math.random() * 100); // 0-100
        console.log(grade);

        debugger;
        if (grade >= 90) {
            console.log(grade + "分,优秀");
        } else if (grade >= 80) {
            console.log(grade + "分,良好");
        } else if (grade >= 70) {
            console.log(grade + "分,一般");
        } else if (grade >= 60) {
            console.log(grade + "分,及格");
        } else {
            console.log(grade + "分,不及格");
        }
    }






</script>

</html>